<template>
  <view class="profile-container">
    <!-- 顶部栏 -->
    <view class="header">
      <text class="header-title">我的</text>
      <view class="header-right">
        <view class="action-btn" @tap="showSettings">
          <text class="action-icon">⚙️</text>
        </view>
      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image :src="userInfo.avatar" class="user-avatar"/>
      <view class="user-info">
        <text class="user-name">{{ userInfo.nickname }}</text>
        <text class="user-id">ID: {{ userInfo.id }}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-title">账户管理</view>
      <view class="menu-list">
        <view class="menu-item" @tap="navigateToAccountInfo">
          <text class="menu-icon">👤</text>
          <text class="menu-text">账户与安全</text>
          <text class="arrow-icon">→</text>
        </view>
        <view class="menu-item" @tap="navigateToPrivacySettings">
          <text class="menu-icon">🔒</text>
          <text class="menu-text">隐私设置</text>
          <text class="arrow-icon">→</text>
        </view>
        <view class="menu-item" @tap="navigateToPermissionSettings">
          <text class="menu-icon">📱</text>
          <text class="menu-text">权限管理</text>
          <text class="arrow-icon">→</text>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view class="menu-title">系统</view>
      <view class="menu-list">
        <view class="menu-item" @tap="navigateToAbout">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">关于我们</text>
          <text class="arrow-icon">→</text>
        </view>
        <view class="menu-item" @tap="navigateToAdSettings">
          <text class="menu-icon">📢</text>
          <text class="menu-text">广告设置</text>
          <text class="arrow-icon">→</text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="btn logout" @tap="logout">退出登录</button>
    </view>

    <!-- 底部导航栏 -->
    <view class="footer-nav">
      <view class="nav-item" @tap="openIndex">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-item" @tap="openSchedule">
        <text class="nav-icon">📅</text>
        <text class="nav-text">日程</text>
      </view>
      <view class="nav-item" @tap="openNotes">
        <text class="nav-icon">📝</text>
        <text class="nav-text">笔记</text>
      </view>
      <view class="nav-item active" @tap="navigateToProfile">
        <text class="nav-icon">👤</text>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        nickname: '微信用户',
        avatar: '/static/avatar.jpg',
        id: 'user' + Math.floor(Math.random() * 1000000)
      }
    };
  },
  onLoad() {
    // 从本地存储获取用户信息
    const loginInfo = uni.getStorageSync('demo_login_info');
    if (loginInfo) {
      this.userInfo.nickname = loginInfo.nickname || this.userInfo.nickname;
      this.userInfo.avatar = loginInfo.avatarUrl || this.userInfo.avatar;
    }
  },
  methods: {
    // 打开首页
    openIndex() {
      uni.redirectTo({
        url: '/pages/demo/index'
      });
    },

    // 打开日程
    openSchedule() {
      uni.redirectTo({
        url: '/pages/demo/schedule'
      });
    },

    // 打开笔记
    openNotes() {
      uni.redirectTo({
        url: '/pages/demo/notes'
      });
    },

    // 打开个人资料页
    navigateToProfile() {
      // 已经在当前页面，无需跳转
    },

    // 导航到账户与安全
    navigateToAccountInfo() {
      uni.navigateTo({
        url: '/pages/demo/account-info'
      });
    },

    // 导航到隐私设置
    navigateToPrivacySettings() {
      uni.navigateTo({
        url: '/pages/demo/privacy-settings'
      });
    },

    // 导航到权限设置
    navigateToPermissionSettings() {
      uni.navigateTo({
        url: '/pages/demo/permission-settings'
      });
    },

    // 导航到关于我们
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/demo/about'
      });
    },

    // 导航到广告设置
    navigateToAdSettings() {
      uni.navigateTo({
        url: '/pages/demo/ad-settings'
      });
    },

    // 显示设置
    showSettings() {
      uni.navigateTo({
        url: '/pages/demo/settings'
      });
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            
            // 跳转到登录页面
            uni.reLaunch({
              url: '/pages/demo/index'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.profile-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 100rpx;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.action-btn {
  padding: 10rpx;
}

.action-icon {
  font-size: 32rpx;
  color: #333;
}

/* 用户信息卡片 */
.user-card {
  display: flex;
  align-items: center;
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.user-id {
  font-size: 28rpx;
  color: #999;
}

/* 菜单区域 */
.menu-section {
  margin-bottom: 20rpx;
  background-color: #fff;
}

.menu-title {
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  color: #999;
  background-color: #f8f9fc;
}

.menu-list {
  background-color: #fff;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 36rpx;
  margin-right: 30rpx;
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
}

/* 退出登录 */
.logout-section {
  padding: 40rpx;
}

.btn.logout {
  background-color: #fff;
  color: #ff5252;
  border: 1rpx solid #ff5252;
  font-size: 32rpx;
  border-radius: 10rpx;
  line-height: 80rpx;
}

/* 底部导航栏 */
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
}

.nav-item.active {
  color: #07c160;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 24rpx;
}
</style>